<template>
  <div class="flex_cm container" style="height: 100%">
    <search
      :data="header_list"
      @changeIsShow="
        (e) => {
          header_list[e].isShow = !header_list[e].isShow
          header_list[e].value =
            header_list[e].type == 'input_number' ? ['', ''] : ''
        }
      "
      @search="search_key"
      @reset="
        header_list.forEach((item) => {
          item.value = item.type == 'input_number' ? ['', ''] : ''
        }),
          search_key()
      "
    ></search>
    <div class="p_0_10 bg_fff flex1">
      <div class="flex_js p_10_0">
        <div class="c_666 fw">企业对账</div>
        <div class="flex">
          <setTable
            :data="header_list"
            :height_size="height_size"
            @changeShowTable="
              (e) => {
                header_list[e].showTable = !header_list[e].showTable
              }
            "
            @resetTableSet="
              () => {
                header_list.forEach((item) => {
                  item.showTable = true
                })
              }
            "
            @changeHeightSize="
              (e) => {
                height_size = e
              }
            "
          ></setTable>
        </div>
      </div>
      <el-table
        style="text-align: center"
        :data="list"
        ref="tableRef"
        max-height="280"
        border
        highlight-current-row
        v-loading="loading1"
        :row-style="{
          height: height_size == 2 ? '50px' : '',
        }"
        :cell-style="{
          padding: height_size == 3 ? '0' : '',
        }"
        @current-change="current_change"
      >
        <el-table-column type="index" label="序号" width="80"></el-table-column>
        <el-table-column
          label="企业名称"
          key="企业名称"
          sortable
          v-if="header_list[0].showTable"
          prop="name"
        >
        </el-table-column>
        <el-table-column
          label="企业ID"
          key="企业ID"
          sortable
          v-if="header_list[1].showTable"
          prop="id"
        >
        </el-table-column>
        <el-table-column
          label="充值余额"
          prop="rechargeBalance"
          key="充值余额"
          sortable
          v-if="header_list[2].showTable"
        ></el-table-column>
      </el-table>
      <el-divider style="margin-top: 20px"></el-divider>
      <div class="flex_js p_10_0">
        <div class="c_666 fw">充值明细</div>
        <div class="flex">
          <setTable
            :data="header_list1"
            :height_size="height_size"
            :max_height="'400px'"
            @changeShowTable="
              (e) => {
                header_list1[e].showTable = !header_list1[e].showTable
              }
            "
            @resetTableSet="
              () => {
                header_list1.forEach((item) => {
                  item.showTable = true
                })
              }
            "
            @changeHeightSize="
              (e) => {
                height_size = e
              }
            "
          ></setTable>
        </div>
      </div>
      <el-table
        style="text-align: center; margin-top: 10px"
        :data="rechargeDetails_list"
        :max-height="max_height"
        border
        highlight-current-row
        v-loading="loading2"
        :row-style="{
          height: height_size == 2 ? '50px' : '',
        }"
        :cell-style="{
          padding: height_size == 3 ? '0' : '',
        }"
      >
        <el-table-column type="index" label="序号" width="80"></el-table-column>
        <el-table-column
          label="下单日期"
          prop="name"
          key="下单日期"
          v-if="header_list1[0].showTable"
          sortable
        >
          <template #default="scope: any">{{
            formatDate(parseInt(scope.row?.createTime), 'yyyy-MM-dd')
          }}</template>
        </el-table-column>
        <el-table-column
          label="支付状态"
          prop="status"
          key="支付状态"
          sortable
          v-if="header_list1[1].showTable"
        >
          <template #default="scope: any">
            <div v-show="scope.row?.status == 1">待支付</div>
            <div v-show="scope.row?.status == 2">待确认</div>
            <div v-show="scope.row?.status == 3">已确认</div>
            <div v-show="scope.row?.status == 4">已取消</div>
            <div v-show="scope.row?.status == 5">被驳回</div>
          </template>
        </el-table-column>
        <el-table-column
          label="充值金额"
          prop="totalAmount"
          key="充值金额"
          sortable
          v-if="header_list1[2].showTable"
        ></el-table-column>
        <el-table-column
          label="付款金额"
          prop="actualAmount"
          key="付款金额"
          sortable
          v-if="header_list1[3].showTable"
        ></el-table-column>
        <el-table-column
          label="赠送金额"
          prop="giftAmount"
          key="赠送金额"
          sortable
          v-if="header_list1[4].showTable"
        ></el-table-column>
        <el-table-column
          label="充值套餐"
          key="充值套餐"
          sortable
          prop="rechargePackage"
          v-if="header_list1[5].showTable"
        >
          <template #default="scope: any">{{
            scope.row?.rechargePackage?.name
          }}</template>
        </el-table-column>
        <el-table-column
          label="付款日期"
          key="付款日期"
          sortable
          prop="paySuccessTime"
          v-if="header_list1[6].showTable"
        >
          <template #default="scope: any">
            <div v-show="scope.row?.paySuccessTime != '-1'">
              {{
                formatDate(parseInt(scope.row?.paySuccessTime), 'yyyy-MM-dd')
              }}
            </div></template
          >
        </el-table-column>
        <el-table-column
          label="交易单号"
          key="交易单号"
          sortable
          prop="''"
          v-if="header_list1[7].showTable"
          ><template #default="scope: any">
            <div v-for="item in scope.row?.itemList" :key="item.id">
              {{ item?.outTradeNo }}
            </div>
          </template></el-table-column
        >
        <el-table-column
          label="商户单号"
          key="商户单号"
          prop="''"
          sortable
          v-if="header_list1[8].showTable"
        ></el-table-column>
        <el-table-column
          label="支付方式"
          key="支付方式"
          sortable
          prop="payWay"
          v-if="header_list1[9].showTable"
          ><template #default="scope: any">
            <div v-show="scope.row?.payWay == 1">余额支付</div>
            <div v-show="scope.row?.payWay == 2">微信支付</div>
            <div v-show="scope.row?.payWay == 3">支付宝支付</div>
            <div v-show="scope.row?.payWay == 4">线下支付</div>
          </template></el-table-column
        >
        <el-table-column
          label="付款备注"
          key="付款备注"
          porp="remark"
          v-if="header_list1[10].showTable"
          ><template #default="scope: any"
            ><div class="text_over">
              <el-tooltip :content="scope.row?.remark" placement="bottom">
                {{ scope.row?.remark }}
              </el-tooltip>
            </div></template
          ></el-table-column
        >
        <el-table-column label="操作">
          <template #default="scope: any">
            <!-- <el-button>审核</el-button> -->
            <table_edit
              v-show="scope.row?.status == 2"
              :role="has_role_list"
              @edit_item_status="pass(scope)"
            ></table_edit>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="m_10_0 pagination"
        v-model:currentPage="rechargeDetails_page_data.current"
        v-model:page-size="rechargeDetails_page_data.pageSize"
        :page-sizes="[5, 10, 20, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="rechargeDetails_total"
        @size-change="
          (e) => {
            rechargeDetails_page_data.pageSize = e
            get_recharge_list()
          }
        "
        @current-change="
          (e) => {
            rechargeDetails_page_data.current = e
            get_recharge_list()
          }
        "
      />
    </div>
  </div>
  <el-drawer
    v-model="show_confirm_box"
    direction="rtl"
    size="60%"
    :close-on-click-modal="false"
  >
    <template #title> <h4>充值信息详情</h4></template>
    <template #default>
      <el-table :data="confirm_list" border style="text-align: center">
        <el-table-column
          label="序号"
          type="index"
          width="80px"
        ></el-table-column>
        <el-table-column label="支付水单号" prop="outTradeNo"></el-table-column>
        <el-table-column label="金额" prop="totalFee"></el-table-column>
        <el-table-column label="付款人" prop="payer"></el-table-column>
        <el-table-column label="付款银行" prop="payBank"></el-table-column>
        <el-table-column label="水单备注">
          <template #default="scope: any"
            ><div class="text_over">
              <el-tooltip
                :content="scope.row.payMessage"
                placement="bottom-start"
              >
                {{ scope.row.payMessage }}
              </el-tooltip>
            </div></template
          >
        </el-table-column>
        <el-table-column label="付款水单">
          <template #default="scope: any">
            <div
              v-show="scope.row?.payPic != ''"
              class="cp c_3580eb"
              @click="download_pic(scope.row)"
            >
              预览
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope: any">
            <div>
              <el-radio
                v-model="scope.row.confirmStatus"
                @change="is_right({ item: scope.row, type: 0 })"
                :label="0"
                style="margin: 0"
                >信息无误</el-radio
              >
              <el-radio
                v-model="scope.row.confirmStatus"
                @change="is_right({ item: scope.row, type: 1 })"
                :label="1"
                style="margin: 0"
                >信息有误</el-radio
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column label="驳回理由" width="200px">
          <template #default="scope: any">
            <el-input
              :disabled="!scope.row.confirmStatus"
              v-model="scope.row.remark"
            ></el-input>
          </template>
        </el-table-column>
      </el-table>
      <div class="tr m_top10">
        <el-button @click="show_confirm_box = false">取消</el-button>
        <el-button
          type="warning"
          :loading="btn_loading"
          :disabled="show_reject_btn"
          @click="pass_submit(1)"
          >驳回</el-button
        >
        <el-button
          type="primary"
          :disabled="show_pass_btn"
          :loading="btn_loading"
          @click="pass_submit(2)"
          >审核</el-button
        >
      </div>
    </template>
  </el-drawer>
  <el-image-viewer
    v-if="img_url != ''"
    :url-list="[img_url]"
    fit="scale-down"
    class="border"
    append-to-body
    @close="img_url = ''"
  ></el-image-viewer>
</template>

<script lang="ts" setup>
import {
  check_role,
  formatDate,
  dictData,
  handle_search_key,
} from '@/utils/utils' // 权限校验
import search from '@/view/components/search.vue'
import table_edit from '@/view/components/table_edit.vue'
import setTable from '@/view/components/setTable.vue'
import { onMounted, ref, onUnmounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from '@/service/HttpRequest'
import serviceApi from '@/service/api'
import EventBus from '@/utils/EventBus'
const has_role_list = ref([{ path: 'rechargeConfirm/pass', has_role: false }])
const img_url = ref('')
const download_pic = (e) => {
  axios
    .request({
      url: serviceApi.enterprise_downloadSlip + '/' + e.payPic,
      method: 'get',
      responseType: 'blob',
    })
    .then((res1) => {
      console.log(res1)
      const blob = new Blob([res1 as any]) // res.data 为接口返回的数据，依实例而行
      const URL = window.URL.createObjectURL(blob) // 生成一个 Blob URL
      img_url.value = URL
    })
}
const show_confirm_box = ref(false)
const confirm_list = ref([])
const update_item = ref()
const pass = (e) => {
  confirm_list.value = e.row.itemList
  update_item.value = e.row
  show_confirm_box.value = true
}
const pass_submit = (e) => {
  if (btn_loading.value) return
  btn_loading.value = true
  let IdList = []
  confirm_list.value.forEach((item) => {
    item.itemId = item.id
    IdList.push(item.id)
  })
  let data = {
    enterpriseId: rechargeDetails_page_data.value.enterpriseId,
    memberId: update_item.value.memberId ? update_item.value.memberId : '',
    payOrderId: update_item.value.payOrderId,
    upgradeOrderId: update_item.value.id,
    rechargeOrderId: update_item.value.id,
    itemList: confirm_list.value, // 拒绝参数
    itemIdList: IdList, // 通过参数
  }
  var url =
    e == 1 ? serviceApi.rechangeOrder_reject : serviceApi.rechargeOrder_pass

  ElMessageBox.confirm(
    '确定审核' + (e == 1 ? '拒绝该充值信息？' : '通过该充值信息？'),
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      closeOnClickModal: false,
      type: 'warning',
    }
  )
    .then(() => {
      axios
        .request({
          url: url,
          method: 'put',
          data: data,
        })
        .then((res) => {
          console.log(res)
          ElMessage.success('操作成功！')
          setTimeout(() => {
            get_recharge_list()
            btn_loading.value = false
            show_confirm_box.value = false
          }, 1000)
        })
        .catch((error) => {
          btn_loading.value = false
          ElMessage.error(error)
        })
    })
    .catch(() => {
      btn_loading.value = false
    })
}
const btn_loading = ref(false)
const show_pass_btn = ref(true)
const show_reject_btn = ref(true)
const is_right = (e) => {
  console.log(e, confirm_list.value)
  let show_pass = confirm_list.value.every((item) => {
    return item.confirmStatus === 0
  })
  let show_error = confirm_list.value.some((item) => {
    return item.confirmStatus === 1
  })
  if (show_pass) {
    show_pass_btn.value = false
  } else {
    show_pass_btn.value = true
  }
  if (show_error) {
    show_reject_btn.value = false
  } else {
    show_reject_btn.value = true
  }
}
const list = ref()
const loading1 = ref(false)
const loading2 = ref(false)
const height_size = ref(1)
const header_list = ref<any>([
  {
    label: '企业名称',
    value: '',
    showTable: true,
    type: 'input',
    isShow: true,
    options: [],
  },
  {
    label: '企业ID',
    value: '',
    showTable: true,
    type: 'input',
    isShow: true,
    options: [],
  },
  {
    label: '充值余额',
    value: ['', ''],
    showTable: true,
    type: 'input_number',
    isShow: false,
    options: [],
  },
])
const header_list1 = ref([
  {
    label: '下单日期',
    value: '',
    showTable: true,
    type: 'input',
    isShow: true,
    options: [],
  },
  {
    label: '支付状态',
    value: '',
    showTable: true,
    type: 'input',
    isShow: true,
    options: [],
  },
  {
    label: '充值金额',
    value: ['', ''],
    showTable: true,
    type: 'input_number',
    isShow: false,
    options: [],
  },
  {
    label: '付款金额',
    value: ['', ''],
    showTable: true,
    type: 'input_number',
    isShow: true,
    options: [],
  },
  {
    label: '赠送金额',
    value: ['', ''],
    showTable: true,
    type: 'input_number',
    isShow: true,
    options: [],
  },
  {
    label: '充值套餐',
    value: '',
    showTable: true,
    type: 'input',
    isShow: true,
    options: [],
  },
  {
    label: '付款日期',
    value: '',
    showTable: true,
    type: 'input',
    isShow: true,
    options: [],
  },
  {
    label: '交易单号',
    value: '',
    showTable: true,
    type: 'input',
    isShow: true,
    options: [],
  },
  {
    label: '商户单号',
    value: '',
    showTable: true,
    type: 'input',
    isShow: true,
    options: [],
  },
  {
    label: '支付方式',
    value: '',
    showTable: true,
    type: 'input',
    isShow: true,
    options: [],
  },
  {
    label: '付款备注',
    value: '',
    showTable: true,
    type: 'input',
    isShow: true,
    options: [],
  },
])
const page_data = ref({
  current: 1,
  pageSize: 1000,
  name: '',
  id: '',
  rechargeBalance: '',
})
const rechargeDetails_page_data = ref({
  current: 1,
  pageSize: 10,
  enterpriseId: '',
})
const rechargeDetails_list = ref([])
const rechargeDetails_total = ref()
const payWay = ref()
const max_height = ref()
onMounted(() => {
  has_role_list.value.forEach((item) => {
    item.has_role = check_role(item.path)
  })
  max_height.value = window.innerHeight - 670 // 不带分页的 table 高度
  EventBus.on('refresh', () => {
    console.log(rechargeDetails_page_data.value.enterpriseId)
    get_list()
    ElMessage.success('刷新成功！')
  })
  get_list()
  dictData('1541677419486777346').then((res) => {
    payWay.value = res as any
  }) // 获取字典值 支付方式
})
onUnmounted(() => {
  EventBus.off('refresh')
})
const current_change = (currentRow) => {
  console.log(currentRow, rechargeDetails_page_data.value.enterpriseId)
  if (currentRow) {
    rechargeDetails_page_data.value.enterpriseId = currentRow.id
    get_recharge_list()
  }
}
const get_recharge_list = () => {
  loading2.value = true
  axios
    .request({
      url: serviceApi.enterprise_rechargeDetails,
      method: 'post',
      data: rechargeDetails_page_data.value,
    })
    .then((res) => {
      console.log(res, rechargeDetails_page_data.value.enterpriseId)
      rechargeDetails_list.value = res.data.content
      rechargeDetails_total.value = parseInt(res.data.totalElements)
      loading2.value = false
    })
    .catch((err) => {
      loading2.value = false
      ElMessage.error(err)
    })
}
const tableRef = ref(null)
const get_list = () => {
  loading2.value = true
  axios
    .request({
      url: serviceApi.enterprise_list,
      method: 'post',
      data: handle_search_key(page_data.value),
    })
    .then((res) => {
      loading2.value = false
      console.log(res.data.content.length)
      if (res.data.content.length != 0) {
        let flag = res.data.content.some((item, index) => {
          if (rechargeDetails_page_data.value.enterpriseId == item.id) {
            tableRef.value.setCurrentRow(res.data.content[index])
          }
          return rechargeDetails_page_data.value.enterpriseId == item.id
        })
        if (!flag) {
          tableRef.value.setCurrentRow(res.data.content[0])
        }
      } else {
        rechargeDetails_list.value = []
        rechargeDetails_total.value = 0
      }
      list.value = res.data.content
    })
    .catch((err) => {
      loading2.value = false
      ElMessage.error(err)
    })
}
const search_key = () => {
  page_data.value.name = header_list.value[0].value
  page_data.value.id = header_list.value[1].value
  page_data.value.rechargeBalance = header_list.value[2].value
  //   page_data.value.gift = header_list.value[3].value
  get_list()
}
</script>

<style lang="scss" scoped></style>
